<template>
  <div id="noteBox">
    <div class="title">
      <span class="line"></span>
      <span>{{$t('wechat.baiduwangpan')}}</span>
      <el-button style="
          float: right;
          margin-left: 10px;
          margin-right: 10px;
          margin-top: 6px;
          color: #fff;
        " type="text" @click="printPdf"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>
    </div>
    <div class="bg">
      <!-- <span>账户信息：</span> -->
      <img width="60px" height="60px" :src="tableData[0].avatar" alt="" @error="errorHandler">
      <span style="margin-left:25px;">{{$t('wechat.username')}}：{{ tableData[0].nick }}</span>
      <span style="margin-left:25px;">{{$t('wechat.account')}}：{{ tableData[0].accountname }}</span>
    </div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="好友列表" name="first">
        <div class="baiduNetDisc"  id="transferClassid1" style="height:100%;">
          <div class="netDiscItem" v-for="(item, index) in tableFirendsData" :key="index">
            <img width="60px" height="60px" :src="item.avatar" alt="" @error="errorHandler">
            <div style="width:320px;">
              <div>{{$t('wechat.username')}}：{{ item.nick }}</div>
              <div>{{$t('wechat.account')}}：{{ item.account }}</div>
            </div>
          </div>
          <div class="block">
          <el-pagination @size-change="handleSizeChangeFirends" @current-change="handleCurrentChangeFirends"
            :current-page="offsetFirends" :page-size="limitFirends" layout="total, prev, pager, next, jumper"
            :total="totalFirends" 
            :pager-count="5">
          </el-pagination>
        </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文件列表" name="second">

        <!-- <el-table height="500" :data="tableFileData" border style="width: 100%">
          <el-table-column
          width="350"
            prop="content"
            label="文件信息"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>文件名：{{scope.row.filename}}</div>
              <div>文件大小：{{scope.row.filesize}}</div>
              <div>文件md5：{{scope.row.md5}}</div>
              <div>服务器路径：{{scope.row.serverpath}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            align="center"
            label="文件类型"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.filetype==1">视频</div>
              <div v-if="scope.row.filetype==2">音频</div>
              <div v-if="scope.row.filetype==3">图片</div>
              <div v-if="scope.row.filetype==4">文档</div>
              <div v-if="scope.row.filetype==5">程序</div>
              <div v-if="scope.row.filetype==6">其他</div>
              <div v-if="scope.row.filetype==7">种子</div>
            </template>
          </el-table-column>
          <el-table-column prop="notetime" width="300" align="center" label="时间">
            <template slot-scope="scope">
              <div>客户端创建时间：{{formate(scope.row.cctime)}}</div>
              <div>客户端修改时间：{{formate(scope.row.cmtime)}}</div>
              <div>服务器创建时间：{{formate(scope.row.sctime)}}</div>
              <div>服务器修改时间：{{formate(scope.row.smtime)}}</div>
            </template>
          </el-table-column>
        </el-table> -->
        <div style="padding:0 2.5%">
          <a-input-search placeholder="输入文件名搜索" v-model="searchkey" style=";margin-bottom:10px;float:right;"
            @search="initFileList" />
        </div>
        <div class="baiduNetDisc1"  id="transferClassid2"  style="width:100%;">
          <div class="netDiscItem" style="border-bottom:1px solid #ccc;" v-for="(item, index) in tableFileData"
            :key="index">
            <div style="width:420px;padding:15px 0;">
              <div><span style="font-weight: bold;">文件名</span>：{{ item.filename }}</div>
              <div><span style="font-weight: bold;">文件大小</span>：{{ item.filesize }}</div>
              <div><span style="font-weight: bold;">文件md5</span>：{{ item.md5 }}</div>
              <div v-if="item.filetype == 1"><span style="font-weight: bold;">文件类型</span>：视频</div>
              <div v-if="item.filetype == 2"><span style="font-weight: bold;">文件类型</span>：音频</div>
              <div v-if="item.filetype == 3"><span style="font-weight: bold;">文件类型</span>：图片</div>
              <div v-if="item.filetype == 4"><span style="font-weight: bold;">文件类型</span>：文档</div>
              <div v-if="item.filetype == 5"><span style="font-weight: bold;">文件类型</span>：程序</div>
              <div v-if="item.filetype == 6"><span style="font-weight: bold;">文件类型</span>：其他</div>
              <div v-if="item.filetype == 7"><span style="font-weight: bold;">文件类型</span>：种子</div>
              <div><span style="font-weight: bold;">服务器路径</span>：{{ item.serverpath }}</div>
              <div><span style="font-weight: bold;">客户端创建时间</span>：{{ formate(item.cctime) }}</div>
              <div><span style="font-weight: bold;">客户端修改时间</span>：{{ formate(item.cmtime) }}</div>
              <div><span style="font-weight: bold;">服务器创建时间</span>：{{ formate(item.sctime) }}</div>
              <div><span style="font-weight: bold;">服务器修改时间</span>：{{ formate(item.smtime) }}</div>
            </div>
          </div>
          <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="offset"
            :page-size="limit" layout="total, prev, pager,next, jumper" :total="total" 
            :pager-count="5">
          </el-pagination>
        </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getNetdiscList, getNetdiscFileList, getNetdiscFirendsList } from "@/api/netdisc/netdiscApi";
import { parseTime } from "@/utils/index";
import print from "print-js";
import html2canvas from "html2canvas";
export default {
  name: "netdisc",
  props: ["sendData"],
  data() {
    return {
      errorSrc: require('@/assets/imgError.png'),
      tableData: [],
      tableFileData: [],
      offset: 1,
      total: 0,
      offsetFirends: 1,
      limitFirends: 20,
      totalFirends: 0,
      limit: 20,
      activeName: 'first',
      searchkey: '',
      totalFirend: '',
      tableFirendsData: ''
    };
  },

  watch: {
    "$store.state.account.netdisc": function () {
      this.activeName = 'first',
        this.offset = 1;
      this.init();
      this.initFirendsList();
      this.initFileList();
    },
  },
  created() {
    this.offset = 1;
    this.init();
    this.initFirendsList();
    this.initFileList();
  },
  methods: {
    //图片加载报错
    errorHandler(e) {
      e.target.src = this.errorSrc
    },
    handleClick(e) {
      if (e.index == '0') {
      this.activeName = 'first'
        this.initFirendsList()
      } else if (e.index == '1') {
        this.activeName = 'second'
        this.initFileList()
      }
    },
    init() {
      let data = {
        proof_num: this.sendData.proof_num,
        account_id: this.sendData.account_id,
        // limit:this.limit,
        // offset:this.offset
      };
      getNetdiscList(data).then((res) => {
        this.tableData = res.data;
        // this.total=res.data.cnt
      });
    },
    // 文件列表
    initFileList() {
      let data = {
        proof_num: this.sendData.proof_num,
        account_id: this.sendData.account_id,
        searchkey: this.searchkey,
        limit: this.limit,
        offset: this.offset
      };
      getNetdiscFileList(data).then((res) => {
        this.tableFileData = res.data;
        this.total = res.data[0].cnt;
      });
    },
    // 好友列表
    initFirendsList() {
      this.tableFirendsData = []
      let data = {
        proof_num: this.sendData.proof_num,
        account_id: this.sendData.account_id,
        limit: this.limitFirends,
        offset: this.offsetFirends
      };
      getNetdiscFirendsList(data).then((res) => {
        //this.tableFirendsData=res.data
        res.data.forEach(element => {
          if (element.account !== '0') {
            this.tableFirendsData.push(element)
          }
        });
        this.totalFirends = res.data[0].cnt
      });
    },
    formate(date) {
      return parseTime(date);
    },
    handleSizeChange(val) {
      this.limit = val
      this.initFileList()
    },
    handleCurrentChange(val) {
      this.offset = val
      this.initFileList()
    },
    handleSizeChangeFirends(val) {
      this.limitFirends = val
      this.initFirendsList()
    },
    handleCurrentChangeFirends(val) {
      this.offsetFirends = val
      this.initFirendsList()
    },
    //打印
       printPdf(){
        let text = this.activeName == "first"?"transferClassid1":"transferClassid2"
        printJS({
          printable: text,// 直接传入元素 id
          type: 'html',
          targetStyles: ['*'],// 保留页面样式
          scanStyles: false,
          style:`.baiduNetDisc {
  height: 631px;
  padding: 0 10px;
  overflow-y: auto;
  padding-bottom: 200px;
}

.baiduNetDisc1 {
  padding: 0 10px;
  overflow-y: auto;
  padding-bottom: 200px;
}

.baiduNetDisc::-webkit-scrollbar,
.baiduNetDisc1::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.baiduNetDisc::-webkit-scrollbar-track,
.baiduNetDisc1::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.baiduNetDisc::-webkit-scrollbar-thumb,
.baiduNetDisc1::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.netDiscItem {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
}

.bg {
  background: rgb(236, 236, 236);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 70px;
  margin-bottom: 10px;
  font-weight: bold;
}

.block {
  margin-top: 1vh;
}

.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 10px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}

.line {
  width: 8px;
  height: 100%;
}

@media screen and (min-width: 2360px) {
  .baiduNetDisc {
    height: 63vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 200px;
  }

  .baiduNetDisc1 {
    height: 58.6vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom:200px;
  }
}

@media screen and (min-width: 2561px) {
  .baiduNetDisc {
    height: 48vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 200px;
  }

  .baiduNetDisc1 {
    height: 44vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 200px;
  }
}
`
});
    },
  },
};
</script>

<style scoped>
.baiduNetDisc {
  height: 631px;
  padding: 0 10px;
  overflow-y: auto;
  padding-bottom: 200px;
}

.baiduNetDisc1 {
  height: 589px;
  padding: 0 10px;
  overflow-y: auto;
  padding-bottom: 200px;
}

.baiduNetDisc::-webkit-scrollbar,
.baiduNetDisc1::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.baiduNetDisc::-webkit-scrollbar-track,
.baiduNetDisc1::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.baiduNetDisc::-webkit-scrollbar-thumb,
.baiduNetDisc1::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.netDiscItem {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
}

.bg {
  background: rgb(236, 236, 236);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 70px;
  margin-bottom: 10px;
  font-weight: bold;
}

.block {
  margin-top: 1vh;
}

.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 10px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}

.line {
  width: 8px;
  height: 100%;
}

@media screen and (min-width: 2360px) {
  .baiduNetDisc {
    height: 63vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 200px;
  }

  .baiduNetDisc1 {
    height: 58.6vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom:200px;
  }
}

@media screen and (min-width: 2561px) {
  .baiduNetDisc {
    height: 48vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 200px;
  }

  .baiduNetDisc1 {
    height: 44vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 200px;
  }
}

</style>